<!DOCTYPE html>
<html lang="en">
  <head>
    <title>v-tools server</title>
    <meta charset="UTF-8" />
    <title><%=title %></title>
    <style type="text/css">
      body {
        color: #333333;
        font-family: tahoma, arial, 宋体, helvetica, sans-serif;
      }

      #main {
        margin-top: 50px;
        margin-right: auto;
        margin-left: auto;
        width: 80%;
        text-align: center;
        min-height: 500px;
      }

      h3 {
        text-align: center;
      }

      .upbox {
        width: 100%;
      }

      .tips {
        color: red;
        font-size: 12px;
        line-height: 25px;
        text-align: center;
      }

      .up {
        display: flex;
        justify-content: center;
        margin-top: 25px;
      }

      .up button {
        margin-left: 10px;
      }

      .up input {
        margin-right: 10px;
      }

      .parameterbox {
        margin-top: 50px;
      }

      button {
        cursor: pointer;
      }

      #loading {
        display: none;
        margin: 20px auto;
        font-size: 12px;
        color: red;
      }

      #count {
        display: none;
        font-size: 18px;
        margin-top: 30px;
        font-style: initial;
      }

      #backup {
        font-size: 18px;
        margin-top: 30px;
        font-style: initial;
      }

      #count span {
        font-weight: bold;
        margin: 0 10px;
      }

      .download {
        margin-top: 50px;
      }

      #current-url {
        display: none;
        font-size: 14px;
        margin-top: 30px;
        line-height: 40px;
      }

      h2 {
        display: none;
        color: red;
      }

      ul {
        list-style: none;
        padding-left: 0;
        max-height: 250px;
        overflow-y: scroll;
        margin: 0;
        scrollbar-width: none;
      }

      ul::-webkit-scrollbar {
        display: none;
      }

      ul li {
        line-height: 31px;
        height: 31px;
        font-size: 14px;
      }

      .error {
        display: none;
        margin: 50px auto;
        width: 80%;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: black;
        color: white;
      }
    </style>
  </head>

  <body>
    <div id="main">
      <div class="upbox">
        <p class="tips">
          tips: 选择 xlsx 文件，文件最好不要过大，最好数据在 1000 条左右，分批次进行爬取！！
        </p>
        <p class="up">
          <input id="file" type="file" accept=".xls,.xlsx" name="files" />
          <button id="uploadBtn">开始上传</button>
        </p>
      </div>
      <div class="parameterbox">
        <button id="reptileBtn">开始爬虫</button>
      </div>
      <div>
        <p id="loading">正在努力的爬取数据，请稍等！！</p>
      </div>
      <div id="current-url">当前爬取地址：<span></span></div>
      <div id="count">已经处理数据<span>50</span>条数</div>
      <div id="backup"></div>
      <h2>数据写入文件成功</h2>
      <div class="error">
        <ul id="err"></ul>
      </div>
      <div class="download">
        <button id="downloadBtn">下载导出数据</button>
      </div>
    </div>
    <h3>请勿用于商业推广以及其他获利用途，如有版权问题请告知删除!</h3>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      const uploadBtn = document.getElementById('uploadBtn');
      const uploadFile = document.getElementById('file');
      const downloadBtn = document.getElementById('downloadBtn');
      const loading = document.getElementById('loading');
      const countBom = document.getElementById('count');
      const countSpan = document.querySelector('#count span');
      const curl = document.getElementById('current-url');
      const urlDom = document.querySelector('#current-url span');
      const h2 = document.querySelector('h2');
      const error = document.querySelector('error');
      const err = document.querySelector('#err');
      const backup = document.getElementById('backup');

      let isUploadFile = false; // 是否上传文件
      let isDisableDownLoad = true; // 是否禁用下载

      // 即时通讯服务
      var socket = io();
      // 监听每条完成时播报
      socket.on('everyMsg', count => {
        console.log(count);
        countSpan.innerHTML = count;
        countBom.style.display = 'block';
      });
      // 监听当前的网页地址
      socket.on('searchMsg', url => {
        // console.log(url)
        urlDom.innerHTML = url;
        curl.style.display = 'block';
      });
      // 监听爬取完成时播报
      socket.on('successMsg', msg => {
        console.log(msg);
        loading.innerHTML = msg;
        loading.style.display = 'block';
      });
      // 监听写入文件时播报
      socket.on('writeMsg', msg => {
        console.log(msg);
        isDisableDownLoad = false;
        h2.innerHTML = msg;
        h2.style.display = 'block';
      });
      // 监听错误页面时播报
      socket.on('errorMsg', url => {
        // console.log(url);
        error.style.display = 'block';
        const li = document.createElement('li');
        li.innerHTML = '爬取错误地址' + url;
        err.appendChild(li);
      });
      // 监听备份文件播报
      socket.on('backupMsg', msg => {
        // console.log(msg);
        backup.innerHTML = msg;
      });

      // 1.上传文件
      uploadBtn.addEventListener('click', () => {
        const filelist = uploadFile.files; // 文件列表
        if (!filelist.length) {
          return alert('请选择需要上传的文件');
        }
        const file = filelist[0]; // 获取文件
        if (file.size > 1024 * 1024 * 5) {
          return alert('请选择小于5M的文件');
        }
        let formData = new FormData();
        formData.append('excel', file);
        formData.append('type', 'findPage');
        upload(formData);
      });
      async function upload(formData) {
        const resp = await fetch('/api/upload', {
          method: 'POST', // 文件数据一般都是 post 请求可以存放二进制数据
          body: formData
        });
        try {
          if (resp.status !== 200) {
            return alert('文件上传失败啦');
          }
          const { data } = await resp.json();
          isUploadFile = true; // 说明已经上传文件
          return alert(data.message);
        } catch (e) {
          return alert('文件上传失败啦');
        }
      }

      // 2.参数配置
      const reptileBtn = document.getElementById('reptileBtn');
      reptileBtn.addEventListener('click', () => {
        if (!isUploadFile) {
          return alert('请先选择上传文件才能进行爬虫处理');
        }
        fetch(`/api/reptile`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(res => {
            loading.innerHTML = res.msg;
            loading.style.display = 'block';
          });
      });

      // 3.下载文件
      downloadBtn.addEventListener('click', () => {
        if (!isUploadFile) {
          return alert('请先选择上传文件才能进行爬虫处理');
        }
        if (isDisableDownLoad) {
          return alert('数据还没有爬取完成，请爬取完成在下载导出');
        }
        window.open(`${origin}/api/download`);
      });
    </script>
  </body>
</html>
